<script setup>
</script>
<template>
  <div class="wrapper">
    <div class="mainWrapper">
      <div class="topArticle"></div>
      <div class="midArticle"></div>
      <div class="bottomArticle"></div>
    </div> 
  </div>
</template>

<style scoped>
.wrapper{
  height: 400px;
  width: 400px;
  position: fixed;
  top:0;
  left: 0;
  /* background-color:rgb(245, 244, 244); */
  z-index: -100;
}
.topArticle{
  height: 180px;
  width: 500px;
  border-radius: 90px;
  background-color: antiquewhite;
}
.midArticle{
  height: 80px;
  width: 400px;
  border-radius: 40px;
  background-color: aqua;
}
.bottomArticle{
  height: 80px;
  width: 300px;
  border-radius: 40px;
  background-color:blueviolet
}
.mainWrapper{
  transform: translate(-10px,-100px) rotate(45deg);
}
</style>
